<template>
  <div class="monitoring-center">
    <el-dialog title="选择时间段" append-to-body top="350px" :visible.sync="dialogVisible" width="440px">
      <div class="content">
        <el-date-picker
          style="padding:0px;"
          v-model="dialogDate"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
        <div class="button-list">
          <el-button type="primary" @click="checkTime">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog title="发起立案" append-to-body :visible.sync="registerVisible" width="1872px">
      <div class="content">
        <div>
          <el-form
            class="detail-content"
            label-width="120px"
            :rules="addFormRules"
            :model="addForm"
          >
            <el-row>
              <el-col :span="24">
                <el-form-item label="处理方式：" prop="consName">
                  <el-input v-model="addForm.consName" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="承办人员：" prop="buildUnit">
                  <el-tag
                    type="info"
                    :key="tag"
                    v-for="tag in dynamicTags"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)"
                  >{{tag}}</el-tag>
                  <el-input
                    class="input-new-tag"
                    v-if="inputVisible"
                    v-model="addForm.buildUnit"
                    ref="saveTagInput"
                    size="small"
                    @keyup.enter.native="handleInputConfirm"
                    @blur="handleInputConfirm"
                  ></el-input>
                  <el-button v-else class="button-new-tag" size="small" @click="showInput">+</el-button>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="案发时间：" prop="zhengJianLeiXing">
                  <el-input v-model="addForm.zhengJianLeiXing" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="案件来源：" prop="zhengJianHaoMa">
                  <el-input v-model="addForm.zhengJianHaoMa" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="案发地址：" prop="consUnit">
                  <el-input v-model="addForm.consUnit" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="当事人类型：">
                  <el-input v-model="addForm.carrierUnit" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="单位名称：" prop="buildUnit">
                  <el-input v-model="addForm.buildUnit" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="证件类型：" prop="zhengJianLeiXing">
                  <el-input v-model="addForm.zhengJianLeiXing" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="证件号码：" prop="zhengJianHaoMa">
                  <el-input v-model="addForm.zhengJianHaoMa" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="10">
                <el-form-item label="法人/负责人：" prop="buildUnit">
                  <el-input v-model="addForm.buildUnit" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="职务：" prop="zhengJianLeiXing">
                  <el-input v-model="addForm.zhengJianLeiXing" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="联系电话：" prop="zhengJianHaoMa">
                  <el-input v-model="addForm.zhengJianHaoMa" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="联系地址：" prop="consAddr">
                  <el-input v-model="addForm.consAddr" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="违法行为：">
                  <el-input v-model="addForm.legalPerson" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="案情摘要：">
                  <el-input v-model="addForm.faRenZhengJianLeiXing" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="附件：">
                  <el-input v-model="addForm.faRenZhengJianHaoMa" placeholder="请输入"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="button-list">
          <el-button type="primary" @click="checkTime">确 定</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </div>
      </div>
    </el-dialog>

    <div v-show="full_screen && !back_screen" class="full_screen">
      <img :src="full_img.src" alt />
      <div class="title">
        <span>{{full_img.name}}</span>
      </div>
      <el-button class="btn" size="mini" type="primary" @click="playBack">查看回放</el-button>
      <div class="scale" @click="full_screen=false">
        <img src="@/assets/imgs/缩小.png" alt />
      </div>
    </div>
    <div v-show="back_screen" class="back_screen">
      <div class="left image_tofile" ref="imageTofile">
        <div class="title">
          <span>监控名称监控名称监控名称</span>
        </div>
        <!-- <video src="./a.mp4" style="height:500px;width:600px;" controls></video> -->
        <d-player class="player" ref="player" :options="options"></d-player>
        <!-- <div ref="dplayer"></div> -->
        <el-button class="btn" size="mini" plain type="primary" @click="back_screen=false">退 出</el-button>
        <div class="bottom">
          <el-button
            v-show="!pauseVisiable"
            class="btn_1"
            round
            size="mini"
            type="primary"
            @click="pause"
            icon="el-icon-video-play"
          >播 放</el-button>
          <el-button
            v-show="pauseVisiable"
            class="btn_1"
            round
            size="mini"
            type="primary"
            @click="pause"
            icon="el-icon-video-pause"
          >暂 停</el-button>
          <el-button
            class="btn"
            round
            size="mini"
            type="primary"
            @click="screenShot"
            icon="el-icon-picture-outline"
          >截 屏</el-button>
        </div>
      </div>
      <div class="right">
        <div class="head">
          <span>截图照片</span>
        </div>
        <div class="line"></div>
        <canvas v-show="false" id="myCanvas"></canvas>
        <div class="img" v-for="(item,index) in htmlUrl" :key="index">
          <img :src="item" />
          <div class="close-btn" @click="clearUrl(index)">X</div>
        </div>
        <div class="register" @click="register">发起立案</div>
      </div>
    </div>
    <div v-show="!full_screen  && !back_screen">
      <div class="form-search">
        监控名称：
        <el-input style="width:560px;" v-model="searchForm.consName" placeholder="请输入"></el-input>
        <div class="button-line">
          <el-button size="mini" type="primary" @click="onSearch">查 询</el-button>
          <el-button size="mini" plain @click="reSetSearchForm">重 置</el-button>
        </div>
      </div>
      <div class="monitoring" v-for="(item,index) in nepalSceneryDt" :key="index">
        <img :src="item.src" alt />
        <div class="title">{{item.name}}</div>
        <div class="scale" @click="full_screen=true">
          <img @click="scale(item)" src="@/assets/imgs/放大(2).png" alt />
        </div>
      </div>
      <!-- <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>
      <div class="monitoring"></div>-->
    </div>
  </div>
</template>

<script>
// import html2canvas from 'html2canvas'
// import { _sendUrl } from './store'
// import 'dplayer/dist/DPlayer.min.css'
// import DPlayer from 'dplayer'
import VueDPlayer from 'vue-dplayer'
import 'vue-dplayer/dist/vue-dplayer.css'

export default {
  name: 'monitoring-center',
  data() {
    return {
      full_img: {},
      nepalSceneryDt: [],
      queryInfo: {
        name: '',
        rank: '',
        position: '',
        // 当前的页数
        pagenum: 1,
        // 当前每页显示多少条数据
        pagesize: 100
      },
      htmlUrl: [],
      player: {},
      pickerOptions: {
        disabledDate: this.disabledDate
      },
      searchForm: {
        conconsName: ''
      },
      options: {
        container: this.$refs.player,
        screenshot: true,
        video: {
          url:
            'https://api.dogecloud.com/player/get.mp4?vcode=5ac682e6f8231991&userId=17&ext=.mp4'
        }
      },
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputValue: '',
      pauseVisiable: false,
      full_screen: false,
      back_screen: false,
      dialogVisible: false,
      registerVisible: false,
      dialogDate: [],
      addForm: {
        consName: '',
        buildUnit: '',
        zhengJianLeiXing: '',
        zhengJianHaoMa: '',
        consUnit: '',
        carrierUnit: '',
        youXiaoQiXian: '',
        consAddr: '',
        legalPerson: '',
        faRenZhengJianLeiXing: '',
        faRenZhengJianHaoMa: '',
        lianXiDianHua: '',
        latitude: '',
        longitude: '',
        bangDingJianKong: ''
      },
      addFormRules: {
        consName: [
          {
            required: true,
            message: '请输入工地名称',
            trigger: 'blur'
          }
        ],
        buildUnit: [
          {
            required: true,
            message: '请输入建设单位',
            trigger: 'blur'
          }
        ],
        zhengJianLeiXing: [
          {
            required: true,
            message: '请输入证件类型',
            trigger: 'blur'
          }
        ],
        zhengJianHaoMa: [
          { required: true, message: '请输入证件号', trigger: 'blur' }
        ],
        consAddr: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        lianXiDianHua: [
          {
            required: true,
            message: '请输入联系电话',
            trigger: 'blur'
          }
        ],
        latitude: [
          {
            required: true,
            message: '请输入工地纬度',
            trigger: 'blur'
          }
        ],
        longitude: [
          {
            required: true,
            message: '请输入工地经度',
            trigger: 'blur'
          }
        ]
        // bangDingJianKong: [
        //   { required: true, message: '请绑定监控', trigger: 'blur' }
        // ]
      }
    }
  },
  methods: {
    // dplay() {
    //   this.dp = new DPlayer({
    //     container: this.$refs.dplayer,
    //     video: {
    //       url: './a.mp4',
    //       pic: '@/assets/imgs/放大(2).png'
    //     }
    //   })
    // },
    scale(data) {
      this.full_img = data
    },
    async getSceneryList() {
      // this.$http.defaults.headers['IP'] = location.href.toString()
      // this.$http.defaults.headers['token'] = window.sessionStorage.getItem(
      //   'token'
      // )
      const { data: res } = await this.$http.get('/scenerys', {
        params: this.queryInfo
      })
      if (res.status !== 201) {
        return this.$message.error('获取景区列表失败！')
      }
      console.log(res.scenery)
      this.nepalSceneryDt = res.scenery
      this.nepalSceneryDt.forEach(item => {
        item.src = item.src.split(',')[0]
      })
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },

    showInput() {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },

    handleInputConfirm() {
      var inputValue = this.inputValue
      if (inputValue) {
        this.dynamicTags.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    onSearch() {},
    reSetSearchForm() {
      for (const key of Object.keys(this.searchForm)) {
        this.$set(this.searchForm, key, '')
      }
    },
    checkTime() {
      console.log(new Date(this.dialogDate[0]).getTime())
      this.back_screen = true
      this.dialogVisible = false
    },
    disabledDate(time) {
      return time.getTime() > Date.now()
    },
    playBack() {
      this.dialogVisible = true
    },
    pause() {
      this.player.toggle()
      this.pauseVisiable = !this.pauseVisiable
    },
    register() {
      this.registerVisible = true
    },
    screenShot() {
      // this.toImage()
      // this.player.on('screenshot', e => {
      //   console.log(e)
      // })
      if (this.htmlUrl.length >= 3) {
        return this.$message({
          message: '只能截图三张',
          type: 'warning',
          duration: 3 * 1000
        })
      }
      const canvas = document.getElementById('myCanvas')
      canvas.width = this.player.video.videoWidth
      canvas.height = this.player.video.videoHeight
      var ctx = canvas.getContext('2d')
      ctx.drawImage(this.player.video, 0, 0, canvas.width, canvas.height)
      this.htmlUrl.push(canvas.toDataURL('image/png'))
    },
    // 页面元素转图片
    // toImage() {
    //   if (this.htmlUrl.length >= 3) {
    //     return this.$message({
    //       message: '只能截图三张',
    //       type: 'warning',
    //       duration: 3 * 1000
    //     })
    //   }

    //   // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
    //   html2canvas(this.$refs.imageTofile, {
    //     backgroundColor: null
    //   }).then(canvas => {
    //     const url = canvas.toDataURL('image/png')
    //     this.htmlUrl.push(url) // 把生成的base64位图片上传到服务器,生成在线图片地址
    //     console.log(this.htmlUrl)
    //     // this.sendUrl()
    //   })
    // },
    clearUrl(index) {
      this.htmlUrl.splice(index, 1)
    }
    // async sendUrl() {
    //   try {
    //     // console.log(this.form)
    //     const { data } = await _sendUrl(this.htmlUrl)
    //     if (data.code == '200') {
    //       this.$message({
    //         type: 'success',
    //         message: '恭喜你上传成功'
    //       })
    //       this.getDynamicList(this.page, this.size)
    //     } else {
    //       this.$message.error('上传失败')
    //     }
    //   } catch (e) {
    //     console.log(e.message)
    //     this.$message({
    //       type: 'error',
    //       message: '服务器异常或者接口异常'
    //     })
    //   }
    // }
  },
  components: { 'd-player': VueDPlayer },
  mounted() {
    // this.dplay()
    this.getSceneryList()
    this.player = this.$refs.player.dp
    console.log(this.player)
  }
}
</script>

<style lang="scss" scoped>
.img {
  position: relative;
  .close-btn {
    position: absolute;
    cursor: pointer;
    top: 4px;
    right: 12px;
    width: 15px;
    height: 15px;
    font-size: 12px;
    background: #ccc;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    line-height: 15px;
    box-shadow: -1px 1px 1px rgba(10, 10, 10, 0.2);
  }
  .close-btn:hover {
    background: #666;
  }
}
canvas {
  width: 280px;
  height: 158px;
  margin: 10px 0 5px 20px;
}
.player {
  height: 786px;
  // width: 1494px;
  border-radius: 12px 0 0 0;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.el-dialog__body {
  padding: 0 0 0 0 !important;
}
.monitoring {
  width: 365px;
  height: 235px;
  margin: 0 20px 20px 0;
  display: inline-block;
  border: 1px solid #111;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .title {
    position: absolute;
    top: 7px;
    left: 20px;
    width: 192px;
    height: 22px;
    font-size: 16px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    // color: rgba(255, 255, 255, 1);
    line-height: 22px;
  }
  .scale {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 44px;
    width: 44px;
    cursor: pointer;
  }
}
.monitoring-center {
  .back_screen {
    width: 100%;
    height: 100%;
    display: flex;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 2px 10px 0px rgba(41, 97, 172, 0.1);
    border-radius: 12px;
    border: 1px solid #111;
    .left {
      flex: 1;
      border-right: 1px solid #111;
      position: relative;
      .btn {
        position: absolute;
        top: 20px;
        right: 22px;
      }
      .bottom {
        height: 62px;
        width: 100%;
        background: rgba(8, 17, 43, 1);
        position: absolute;
        bottom: 0px;
        border-radius: 0 0 0 12px;
        .btn_1 {
          position: absolute;
          top: 20px;
          right: 120px;
        }
      }
      .title {
        position: absolute;
        top: 20px;
        left: 0px;
        width: 228px;
        height: 36px;
        text-align: center;
        background: linear-gradient(
          270deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 0.6) 100%
        );
        span {
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 36px;
        }
      }
    }
    .right {
      width: 318px;
      height: 100%;
      float: right;
      position: relative;
      border-radius: 0 12px 12px 0;
      // background: rgba(0, 255, 255, 1);
      img {
        width: 280px;
        height: 158px;
        margin: 10px 0 5px 20px;
      }
      .line {
        position: absolute;
        bottom: 67px;
        width: 100%;
        height: 1px;
        background: #dfe5f4;
      }
      .register {
        position: absolute;
        right: 24px;
        bottom: 18px;
        width: 270px;
        height: 32px;
        background: rgba(75, 121, 254, 1);
        font-size: 14px;
        text-align: center;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 32px;
        cursor: pointer;
      }
      .head {
        width: 318px;
        height: 40px;
        background: linear-gradient(
          90deg,
          rgba(64, 132, 247, 1) 0%,
          rgba(75, 121, 254, 1) 100%
        );
        text-align: center;
        border-radius: 0 12px 0 0;
        span {
          height: 16px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: rgba(255, 255, 255, 1);
          line-height: 40px;
        }
      }
    }
  }
  .full_screen {
    width: 100%;
    height: 100%;
    position: relative;
    border: 1px solid #111;
    border-radius: 10px;
    z-index: 1;
    img {
      width: 100%;
      height: 100%;
      border-radius: 12px;
    }
    .title {
      position: absolute;
      top: 20px;
      left: 0px;
      width: 228px;
      height: 36px;
      text-align: center;
      background: linear-gradient(
        270deg,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.6) 100%
      );
      span {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
      }
    }
    .scale {
      position: absolute;
      right: 0;
      bottom: 0;
      height: 54px;
      width: 54px;
      cursor: pointer;
    }
    .btn {
      position: absolute;
      right: 20px;
      top: 22px;
      width: 90px;
      height: 32px;
      background: rgba(75, 121, 254, 1);
      opacity: 0.9;
    }
  }
  height: calc(100vh - 70px);
  margin: 20px 24px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 2px 10px 0px rgba(41, 97, 172, 0.1);
  border-radius: 12px;
  padding: 24px;
  .form-search {
    line-height: 32px;
    display: flex;
    flex-flow: row nowrap;
    align-items: flex-end;
    position: relative;
    margin-bottom: 32px;
    &::after {
      position: absolute;
      content: '';
      display: block;
      height: 1px;
      width: 100%;
      background: rgba(223, 229, 244, 1);
      transform: translate(0, 16px);
    }
    .el-input {
      margin-right: 20px;
    }
    .el-form {
      margin-right: 20px;
      position: relative;
      flex: 1;
      .el-form-item {
        margin-bottom: 0;
      }
    }
  }
}
.button-line {
  text-align: center;
}
.content .button-list {
  text-align: center;
  margin-top: 20px;
}
</style>
